<template>
  <div class="container">
    <el-row>
      <el-form ref="form" :model="form" label-width="150px">
        <el-form-item
          label="姓名："
          prop="name"
          style="width: 500px"
          :rules="[{ required: true, message: '姓名不能为空' }]"
        >
          <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item
          label="手机号："
          prop="phone"
          style="width: 500px"
          :rules="[
            { required: true, message: '手机号不能为空' },
            {
              required: true,
              pattern: /^((13|14|15|16|17|18)[0-9]{1}\d{8})|((166|199|198)[0-9]{1}\d{7})$/,
              message: '手机号格式错误',
              trigger: 'blur'
            }
          ]"
        >
          <el-input
            maxlength="11"
            v-model="form.phone"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="地区："
          prop="area"
          style="width: 500px"
          :rules="[{ required: true, message: '地区不能为空' }]"
        >
          <el-input v-model="form.area" placeholder="请输入地区"></el-input>
        </el-form-item>
        <el-form-item
          label="来源："
          prop="source"
          style="width: 500px"
          :rules="[{ required: true, message: '来源不能为空' }]"
        >
          <el-input v-model="form.source" placeholder="请输入来源"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('form')" :loading="loading"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import normalFilter from "@/components/NormalFilter";
import Upload from "@/components/UploadFile";
import Tinymce from "@/components/Tinymce";
import { Message } from "element-ui";
import { add, getDetail, update } from "@/api/customerBase";
import { getList } from "@/api/productComb";

export default {
  name: "bannerAdd",
  components: {
    normalFilter,
    Tinymce,
    Upload
  },
  data() {
    const _checkPhone = (rule, value, callback) => {
      if (!/^1[3456789]\d{9}$/.test(value)) {
        return callback(new Error("手机号格式错误"));
      }
      callback();
    };
    return {
      _checkPhone,
      loading: false,
      id: "",
      tags: [],
      inputVisible: false,
      inputValue: "",
      productCombList: [],
      form: {
        name: "",
        area: "",
        source: "",
        phone: ""
      }
    };
  },
  async mounted() {
    let res = await getList({ current: 1, size: 1000 });
    if (res) {
      this.productCombList = res.records;
    }
    let { id } = this.$route.params;
    if (!id) return;
    let info = await getDetail({ id });
    if (info) {
      this.form = info;
      this.id = id;
    }
  },
  methods: {
    onSubmit(formName) {
      const { validate } = this.$refs[formName];
      validate(valid => {
        if (valid) {
          this._submitData(this.form);
        }
      });
    },
    async _submitData(params) {
      this.loading = true;
      let res = !this.id
        ? await add(params)
        : await update({ ...params, id: this.id });
      this.loading = false;
      if (res.code === 1) {
        Message({
          message: "保存成功！",
          type: "success",
          duration: 1 * 1000
        });
        setTimeout(() => {
          this.$router.go(-1);
        }, 1000);
      }
    },
    handleContent(val) {
      this["form"]["content"] = val;
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  padding: 20px;
  .radio-form {
    ::v-deep .el-form-item__error {
      left: 5%;
    }
  }
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
}
</style>
